<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />

    <title>s1-mod</title>

    <style>
        * {
            user-select: none;
            -ms-user-select: none;
            cursor: default;
            box-sizing: border-box;
        }
        
        html,
        body {
            -ms-overflow-style: none;
            margin: 0;
            background: url() no-repeat center center fixed;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            color: #222;
            font-family: "Segoe UI Light", "Segoe UI", "Lucida Sans", Arial, sans-serif;
            font-style: normal;
            font-weight: lighter;
            display: flex;
            min-height: 100vh;
            flex-direction: column;
            margin: 0;
            padding: 0;
        }
        
        main {
            flex: 1 0 auto;
            display: flex;
        }
        
        p {
            font-weight: 200;
            font-size: 1.2em;
        }
        
        a {
            color: inherit;
            text-decoration: none;
        }
        
        a:visited {
            color: inherit;
        }
        
        p a {
            text-decoration: underline;
        }
        
        p a:hover {
            color: #ffc320;
        }
        
        nav {
            padding: 0px;
            margin-left: 15px;
            margin-right: 15px;
            border-bottom: 1px solid;
            border-color: rgba(34, 34, 34, 0.25);
        }
        
        #brand {
            display: none;
        }
        
        #brand i {
            font-size: 40px;
            width: 64px;
            vertical-align: top;
            text-align: center;
            cursor: pointer;
        }
        
        #brand span {
            font-size: 27px;
            margin-left: 10px;
        }
        
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        nav ul li {
            display: inline-block;
        }
        
        nav .nav-link {
            display: inline-block;
            font-size: 1.3em;
            color: #222;
            text-transform: uppercase;
            padding: 0 10px;
            letter-spacing: 1px;
            padding: 10px 0px;
            margin-right: 15px;
            margin-bottom: -1px;
        }
        
        nav .nav-link.active {
            border-bottom: 1px solid #222;
        }
        
        nav .nav-link:hover,
        nav .nav-link.active {
            text-shadow: 0px 0px 8px rgba(34, 34, 34, 0.5);
        }
        
        nav .nav-link:first-child {
            padding-left: 0;
        }
        
        nav .nav-link.not-active {
            color: rgba(34, 34, 34, 0.25);
            pointer-events: none;
        }
        
        .side-nav-container {
            min-width: 64px;
            border-right: 1px solid;
            border-color: rgba(34, 34, 34, 0.25);
        }
        
        .side-nav {
            color: rgba(34, 34, 34, 0.7);
            display: flex;
            flex-direction: column;
            padding: 20px;
            padding-top: 78px;
            box-sizing: border-box;
            height: 100%;
            max-height: 100vh;
            position: fixed;
            left: 0;
        }
        
        .side-nav i {
            padding: 10px 0;
            transition: all .1s ease;
            cursor: pointer;
        }
        
        .side-nav i:hover {
            color: rgba(34, 34, 34, 1);
        }
        
        .side-nav-bottom {
            position: absolute;
            bottom: 0;
        }
        
        .main-container {
            padding: 10px;
            width: 100%;
        }
        
        .container {
            width: 80%;
            padding: 0 15px;
            margin-top: 25px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        
        .container.full {
            width: 100%;
            /*padding: 0px;*/
        }
        
        .container h1,
        .container h2,
        .container h3 {
            width: 100%;
            margin-bottom: 10px;
            margin-left: 5px;
            margin-top: 0;
            letter-spacing: 1px;
            font-weight: 200;
        }
        
        .container h3 {
            margin-bottom: 0px;
            font-weight: 500;
        }
        
        .full-row .card {
            flex: 2;
        }
        
        .full-row .card.small {
            flex: 1;
        }
        
        .card {
            display: flex;
            width: 25%;
            box-sizing: border-box;
        }
        
        .card.small {
            width: 12.5%;
        }
        
        .card.full {
            width: 100%;
        }
        
        @media(max-width: 1341px) {
            .card {
                width: 50%;
            }
            .card.small {
                width: 25%;
            }
        }
        
        .card .card-container {
            width: 100%;
            /*margin: 5px;
            margin-left: 15px;
            margin-right: 15px;*/
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
            transition: all 0.5s ease;
        }
        /*.card:hover .card-container {
            box-shadow: 0px 0px 5px 0px rgba(0,0,0,0);
        }*/
        
        .card .card-img {
            overflow: hidden;
            height: 185px;
        }
        
        .card img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            transition: all 0.5s ease;
        }
        
        .card.full .card-img {
            height: 300px;
        }
        
        .card .card-content {
            flex: 1;
            position: relative;
            min-height: 88px;
            padding: 10px 20px;
            padding-bottom: 42px;
            background-color: rgba(34, 34, 34, 0.1);
            color: #222;
            z-index: 5;
            transition: all 0.5s ease;
			text-align: center;
        }
        
        .card:hover .card-content {
            background-color: white;
            color: black;
        }
        /*.card:hover img {
            transform: scale(1.1);
        }*/
        
        .card .card-content span {
            font-size: 1.7em;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .card .card-content p {
            margin-top: 10px;
        }
        
        .card:hover .card-action {
            opacity: 1;
            bottom: 0;
            border-color: rgba(0, 0, 0, 0.25);
        }
        
        .card .card-action {
            /*opacity: 0;*/
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            text-align: center;
            border-top: 1px solid;
            border-color: rgba(34, 34, 34, 0.25);
            text-transform: uppercase;
            padding: 7px;
            box-sizing: border-box;
            font-weight: 500;
            transition: opacity bottom 0.5s;
        }
        
        .card .card-action.hidden-action {
            bottom: -43px;
            transition: bottom 0.5s ease;
            border-color: rgba(0, 0, 0, 0.0);
        }
        
        .card:hover .card-action.hidden-action {
            bottom: 0;
            border-color: rgba(0, 0, 0, 0.25);
        }
        
        a.btn {
            display: inline-block;
            background-color: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(34, 34, 34, 0.42);
            color: #222;
            font-weight: 600;
            padding: 10px 100px;
            border-radius: 1px;
            transition: all 0.5s ease;
            cursor: pointer;
        }
        
        a.btn i {
            vertical-align: middle;
        }
        
        a.btn.highlight {
            background: white;
            color: black;
        }
        
        a.btn:hover {
            background: white;
            color: black;
            box-shadow: 0px 0px 10px rgba(34, 34, 34, 0.42);
        }
        
        a.btn.small {
            padding: 10px 50px;
        }
        
        div.menus>div {
            display: none;
        }
        
        div.menus>div.active {
            display: block !important;
        }
        
        .progress {
            width: 100%;
            height: 40px;
            padding: 0;
            border-radius: 0px;
            overflow: hidden;
            border: 1px solid rgba(34, 34, 34, 0.25);
            background: rgba(0, 0, 0, 0.25);
        }
        
        .progress>.bar {
            width: 50%;
            height: 100%;
            margin: 0;
            background: rgb(121, 121, 121);
            background: linear-gradient(145deg, rgba(121, 121, 121, 1) 0%, rgba(0, 212, 255, 1) 100%);
            transition: all 0.2s linear;
        }
    </style>
</head>

<body>

    <main>
        <div class="main-container">
            <nav class="sticky">
                <ul>
                    <li>
                        <a class="nav-link _play" onClick="showMenu('play')">
                            Play
                        </a>
                    </li>
					<li>
                        <a class="nav-link _survival" onClick="showMenu('survival')">
                            Survival
                        </a>
                    </li>
                    <!--<li>
                        <a class="nav-link _settings" onClick="showMenu('settings')">
                            Settings
                        </a>
                    </li>-->
                    <li>
                        <a class="nav-link _about" onClick="showMenu('about')">
                            About
                        </a>
                    </li>
                </ul>
            </nav>

            <div class="menus">

                <div class="_play">
                    <div class="container full full-row">
                        <div class="card" onClick="window.external.selectMode(1)">
                            <div class="card-container">
                                <div class="card-img">
                                    <img src=""
                                    />
                                </div>
                                <div class="card-content">
                                    <span>Singleplayer</span>
                                    <a>
                                        <div class="card-action hidden-action">
                                            Launch
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="spacer" style="width: 25px"></div>

                        <div class="card" onClick="window.external.selectMode(2)">
                            <div class="card-container">
                                <div class="card-img">
                                    <img src=""
                                    />
                                </div>
                                <div class="card-content">
                                    <span>Multiplayer</span>
                                    <a>
                                        <div class="card-action hidden-action">
                                            Launch
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
				
				<div class="_survival">
                    <div class="container full full-row">
                        <div class="card" onClick="window.external.selectMode(4)">
                            <div class="card-container">
                                <div class="card-img">
                                    <img src=""
                                    />
                                </div>
                                <div class="card-content">
                                    <span>Survival</span>
                                    <a>
                                        <div class="card-action hidden-action">
                                            Launch
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="spacer" style="width: 25px"></div>

                        <div class="card" onClick="window.external.selectMode(5)">
                            <div class="card-container">
                                <div class="card-img">
                                    <img src=""
                                    />
                                </div>
                                <div class="card-content">
                                    <span>Zombies</span>
                                    <a>
                                        <div class="card-action hidden-action">
                                            Launch
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="_settings">

                    <div class="container full full-row">
                        <h2>No settings yet!</h2>
                    </div>

                </div>

                <div class="_about">

                    <div class="container full full-row">
                        <div style="text-align: center; width: 100%;">
                            <h1>AlterWare: s1-mod</h1>
                            <p>Developed by <a onClick="window.external.openUrl('https://alterware.dev');">AlterWare</a>.<br>Big thanks to all the past contributors and supporters.</p>
                            <p>
                                Join us on <a onClick="window.external.openUrl('https://discord.gg/2ETE8engZM');">Discord</a>.
                                Follow the project on <a onClick="window.external.openUrl('https://github.com/alterware');">GitHub</a> or <a onClick="window.external.openUrl('https://twitter.com/alterwaredev');">Twitter</a>.
                            </p>
                        </div>
                    </div>

                </div>

                <div class="_update">

                    <div class="container full full-row">
                        <div class="progress">
                            <div class="bar">
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </main>

    <script>
        function activateElement(name, elements) {
            for (var i = 0; i < elements.length; ++i) {
                var element = elements[i];
                var classList = element.classList;
                var show = false;

                for (var j = 0; j < classList.length; ++j) {
                    if (classList[j] == '_' + name) {
                        show = true;
                        break;
                    }
                }

                if (show) {
                    classList.add('active');
                } else {
                    classList.remove('active');
                }
            }
        }

        function showMenu(menu) {
            var menus = document.querySelectorAll("div.menus>div");
            var buttons = document.querySelectorAll("nav a.nav-link");

            activateElement(menu, menus);
            activateElement(menu, buttons);
        }

        window.onload = function() {
            showMenu("play");
        };
    </script>
</body>

</html>
